<template>
  <div v-loading.fullscreen.lock="fullscreenLoading">
    <div v-if="login === false">未授权访问，如您是相关人事，请联系管理员</div>
    <el-card id="data-table" class="box-card" shadow="hover" v-if="login === true">
      <el-button icon="el-icon-refresh-right" @click="getTranslateUserData()">刷新</el-button>
      <el-button type="primary" @click="outerVisible = true">添加</el-button>

      <el-dialog title="添加用户翻译权限" :visible.sync="outerVisible">
        <span>请输入UID</span>
        <el-input
            placeholder="16位以内用户UID"
            v-model="input_uid"
            :maxlength="16"
            onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode)))'
            clearable>
        </el-input>
        <el-dialog
            width="30%"
            title="确定添加该用户?"
            :visible.sync="innerVisible"
            append-to-body>
          <div style="display: grid;place-items: center">
            <img class="avatar-check" :src="addingUserInfo.uface" alt="用户头像" style=""/>
            <div style="font-size: 20px;font-weight: bold;">{{addingUserInfo.uname}}</div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="outerVisible = false">取 消</el-button>
            <el-button type="primary" @click="addTranslateUser()">提交</el-button>
          </div>
        </el-dialog>
        <div slot="footer" class="dialog-footer">
          <el-button @click="outerVisible = false">取 消</el-button>
          <el-button type="primary" @click="checkAwaitAddingUserInfo(input_uid)">确认</el-button>
        </div>
      </el-dialog>

      <el-divider></el-divider>
      <template>
        <el-table
            :data="user_list.filter(data => !search || data.uid.toString().toLowerCase().includes(search.toLowerCase()))"
            stripe
            v-loading="loading"
            style="width: 100%">
          <el-table-column
              label=""
              width="50">
            <template slot-scope="scope">
              <img class="avatar" :src="scope.row.uface" alt="用户头像"/>
            </template>
          </el-table-column>
          <el-table-column
              prop="uname"
              label="用户昵称"
              width="120">
          </el-table-column>
          <el-table-column
              prop="uid"
              label="UID"
              sortable>
          </el-table-column>
          <el-table-column
              align="right">
            <template slot="header" slot-scope="scope">
              <el-input
                  v-model="search"
                  size="mini"
                  placeholder="输入UID搜索"/>
            </template>
            <template slot-scope="scope">
              <el-popconfirm
                  confirm-button-text='确定'
                  cancel-button-text='取消'
                  icon="el-icon-info"
                  icon-color="red"
                  @confirm="deleteTranslateUser(scope.row.uid)"
                  :title="`确定删除用户: ${scope.row.uname}？`"
              >
                <el-button size="mini" type="danger" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'TranslateBackend',
  data() {
    return {
      translate_func_user_list: [],
      game_id: '',
      search: '',
      user_list: [],
      loading: true,
      login: null,
      outerVisible: false,
      innerVisible: false,
      input_uid: '',
      addingUserInfo: {
        uid: 0,
        uname: '',
        uface: '',
        error: ''
      },
      fullscreenLoading: false
    };
  },
  mounted() {
    this.fullscreenLoading = true;
    this.checkAccountPrivilege()
  },
  methods: {
    async checkAccountPrivilege() {
      let res
      await axios.post('https://olc.xuehusang.cn/openlivechat/start', {
        "code": this.$route.query.Code,
        "mid": this.$route.query.Mid,
        "timestamp": this.$route.query.Timestamp,
        "sign": this.$route.query.CodeSign
      }).then(response => {
        res = response.data
      })
      this.fullscreenLoading = false;
      if (res.code === 0) {
        if (res.translate_admin !== undefined && res.translate_admin === true) {
          this.login = true
          await this.getTranslateUserData()
        } else {
          this.login = false
        }
      } else {
        this.login = false
      }
      await this.closeOpenLiveClient(res.game_id)
    },
    async closeOpenLiveClient(game_id) {
      await axios.post('https://olc.xuehusang.cn/openlivechat/close', {
        "game_id": game_id
      }).catch(error =>{
        console.log(`关闭场次失败:${error}`)
      })
    },
    async getTranslateUserData(){
      let res
      this.loading = true
      await axios.post('https://olc-api.xuehusang.cn/translate/query', {
        "code": this.$route.query.Code
      }).then(response => {
        res = response.data
      }).catch(error =>{
        console.log(`获取白名单发生网络错误:${error}`)
      })
      if (res.code === 0){
        this.user_list = res.user_list
      } else {
        console.log(`获取白名单服务器发生错误: ${res.desc}`)
      }
      this.loading = false
    },
    async addTranslateUser() {
      let res
      await axios.post('https://olc-api.xuehusang.cn/translate/adduser', {
        "code": this.$route.query.Code,
        "uid": this.addingUserInfo.uid.toString()
      }).then(response => {
        res = response.data
      }).catch(error =>{
        console.log(`添加用户发生网络错误:${error}`)
      })
      if (res.code === 0){
        this.innerVisible = false
        this.outerVisible = false
        this.$notify({
          title: '添加用户成功',
          duration: 3000,
          type: 'success'
        });
        await this.getTranslateUserData()
      } else {
        console.log(`添加用户服务器发生错误: ${res.desc}`)
      }
    },
    async deleteTranslateUser(uid) {
      let res
      await axios.post('https://olc-api.xuehusang.cn/translate/deleteuser', {
        "code": this.$route.query.Code,
        "uid": uid.toString()
      }).then(response => {
        res = response.data
      }).catch(error =>{
        console.log(`添加用户发生网络错误:${error}`)
      })
      if (res.code === 0){
        this.$notify({
          title: '删除用户成功',
          duration: 3000,
          type: 'success'
        });
        await this.getTranslateUserData()
      } else {
        console.log(`添加用户服务器发生错误: ${res.desc}`)
      }
    },
    async checkAwaitAddingUserInfo(uid){
      let res;
      await axios.post('https://olc-api.xuehusang.cn/translate/checkuser',{
          uid: uid
      }).then(response => {
          res = response.data
      })
      this.addingUserInfo.uid = uid
      this.addingUserInfo.uface = res.uface
      this.addingUserInfo.uname = res.uname
      this.innerVisible = true
    }
  }
}
</script>

<style scoped>
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 90px;
}
.avatar-check {
   width: 90px;
   height: 90px;
   border-radius: 90px;
  margin-bottom: 10px;
 }
</style>